<template>
  <div id="list">
    <yd-tab v-model="tab">
     <!-- <yd-tab-panel label="待付款" active-color='#fff'>
          <yd-infinitescroll :callback="loadnopayList" ref="loadnopayList">
                <div class="nopaylist-content" v-if="tab==0" slot="list">
                  <div class="nopaylist-nav" :id="item.id" v-for="(item,id) in nopaylist" :key="id" @click="jumpPage(item.receiptcode,item.id)">
                    <div class="nopaylist-top">
                      <div class="nopaylist-top-left" v-if="item.status===0">
                        订单待付款
                      </div>
                      <div class="nopaylist-top-right">
                        {{item.sendtime}}&nbsp;用餐
                      </div>
                    </div>
                    <div class="nopaylist-bottom">
                      <div class="nopaylist-bottom-left">
                        订单号：{{item.receiptcode}}
                      </div>
                      <div class="nopaylist-bottom-right">
                        ￥{{item.totalmoney}}
                      </div>
                    </div>
                  </div>
                  <div class="no-list" v-if="nopaylist.length ===0">
                    <img src="../../assets/img/nolist.png">
                    <div class="text">暂时没什么订单~~</div>
                  </div>
                </div>
                 <span slot="doneTip">没有啦~~</span>
          &lt;!&ndash; 加载中提示，不指定，将显示默认加载中图标 &ndash;&gt;
          <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
        </yd-infinitescroll>
      </yd-tab-panel>-->
      <yd-tab-panel label="未使用" active-color='#fff' >
        <yd-infinitescroll :callback="loadsuccessList" ref="loadsuccessList">
                <div class="nopaylist-content" v-if="tab==0" slot="list">
                  <div class="nopaylist-nav" :id="item.id" v-for="(item,id) in successlist" :key="id" @click="jumpPage(item.receiptcode,item.id)">
                    <div class="nopaylist-top">
                      <div class="nopaylist-top-left" v-if="item.status===1">
                        订单未使用
                      </div>
                      <div class="nopaylist-top-right">
                        {{item.sendtime}}&nbsp;用餐
                      </div>
                    </div>
                    <div class="nopaylist-bottom">
                      <div class="nopaylist-bottom-left">
                        订单号：{{item.receiptcode}}
                      </div>
                      <div class="nopaylist-bottom-right">
                        ￥{{item.totalmoney}}
                      </div>
                    </div>
                  </div>
                  <div class="no-list" v-if="successlist.length ===0">
                    <img src="../../assets/img/nolist.png">
                    <div class="text">暂时没什么未使用的订单~~</div>
                  </div>
                </div>
                 <span slot="doneTip">没有啦~~</span>
          <!-- 加载中提示，不指定，将显示默认加载中图标 -->
          <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
        </yd-infinitescroll>
      </yd-tab-panel>
      <yd-tab-panel label="已完成" active-color='#fff'>
        <yd-infinitescroll :callback="loadcompleteList" ref="loadcompleteList">
                <div class="nopaylist-content" v-if="tab==1" slot="list">
                  <div class="nopaylist-nav" :id="item.id" v-for="(item,id) in completelist" :key="id" @click="jumpPage(item.receiptcode,item.id)">
                    <div class="nopaylist-top">
                      <div class="nopaylist-top-left" v-if="item.status===2">
                        订单已完成
                      </div>
                      <div class="nopaylist-top-right">
                        {{item.sendtime}}&nbsp;用餐
                      </div>
                    </div>
                    <div class="nopaylist-bottom">
                      <div class="nopaylist-bottom-left">
                        订单号：{{item.receiptcode}}
                      </div>
                      <div class="nopaylist-bottom-right">
                        ￥{{item.totalmoney}}
                      </div>
                    </div>
                  </div>
                  <div class="no-list" v-if="completelist.length ===0">
                    <img src="../../assets/img/nolist.png">
                    <div class="text">暂时没什么已完成的订单~~</div>
                  </div>
                </div>
                 <span slot="doneTip">没有啦~~</span>
          <!-- 加载中提示，不指定，将显示默认加载中图标 -->
          <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
        </yd-infinitescroll>
      </yd-tab-panel>
    </yd-tab>
  </div>
</template>

<script type="text/babel">
import apis from '../../../static/js/apis'
import { querystring } from 'vux'
export default {
  components: {
    apis
  },
  data () {
    return {
      agianCall: 1,
      page: 1,
      pageone: 1,
      pagetwo: 1,
      pageSize: 7,
      userid: '',
      nopaylist: [],
      successlist: [],
      completelist: [],
      tab: 0
    }
  },
  created () {
    this.userid = localStorage.getItem('userId')
    if (this.userid === '' || this.userid === null || this.userid === undefined) {
      this.userid = querystring.parse().wxuserinfoid
    }
    // this.getnopaydata()
    this.getsuccesslistdata()
    this.getcompletelistdata()
  },
  methods: {
    // getnopaydata () {
    //   var that = this
    //   that.$axios
    //     .post(
    //       apis + '/shenglian-fast/app/weixinapp/recepitlist', {
    //         userid: this.userid,
    //         status: 0,
    //         page: that.page,
    //         pagesize: that.pageSize
    //       }).then(function (response) {
    //       if (response.data.msg === 'success') {
    //         that.nopaylist = response.data.nopaylist
    //         that.page++
    //       } else {
    //         this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
    //       }
    //     })
    // },
    // loadnopayList () {
    //   var that = this
    //
    //   that.$axios
    //     .post(
    //       apis + '/shenglian-fast/app/weixinapp/recepitlist', {
    //         userid: this.userid,
    //         status: 0,
    //         page: that.page,
    //         pagesize: that.pageSize
    //       }).then(function (response) {
    //       const _list = response.data.nopaylist
    //       that.nopaylist = [...that.nopaylist, ..._list]
    //       if (_list.length < that.pageSize) {
    //         /* 所有数据加载完毕 */
    //         that.$refs.loadnopayList.$emit('ydui.infinitescroll.loadedDone')
    //         return
    //       }
    //       /* 单次请求数据完毕 */
    //       that.$refs.loadnopayList.$emit('ydui.infinitescroll.finishLoad')
    //       that.page++
    //     })
    // },
    getsuccesslistdata () {
      var that = this
      that.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/recepitlist', {
            userid: this.userid,
            status: 1,
            page: that.pageone,
            pagesize: that.pageSize
          }).then(function (response) {
          if (response.data.msg === 'success') {
            that.successlist = response.data.nopaylist
            that.pageone++
          } else {
            this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
          }
        })
    },
    loadsuccessList () {
      var that = this

      that.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/recepitlist', {
            userid: this.userid,
            status: 1,
            page: that.pageone,
            pagesize: that.pageSize
          }).then(function (response) {
          const _list = response.data.nopaylist
          that.successlist = [...that.successlist, ..._list]
          if (_list.length < that.pageSize) {
            /* 所有数据加载完毕 */
            that.$refs.loadsuccessList.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          /* 单次请求数据完毕 */
          that.$refs.loadsuccessList.$emit('ydui.infinitescroll.finishLoad')
          that.pageone++
        })
    },
    getcompletelistdata () {
      var that = this
      that.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/recepitlist', {
            userid: this.userid,
            status: 2,
            page: that.pagetwo,
            pagesize: that.pageSize
          }).then(function (response) {
          if (response.data.msg === 'success') {
            that.completelist = response.data.nopaylist
            that.pagetwo++
          } else {
            this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
          }
        })
    },
    loadcompleteList () {
      var that = this

      that.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/recepitlist', {
            userid: this.userid,
            status: 2,
            page: that.pagetwo,
            pagesize: that.pageSize
          }).then(function (response) {
          const _list = response.data.nopaylist
          that.completelist = [...that.completelist, ..._list]
          if (_list.length < that.pageSize) {
            /* 所有数据加载完毕 */
            that.$refs.loadcompleteList.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          /* 单次请求数据完毕 */
          that.$refs.loadcompleteList.$emit('ydui.infinitescroll.finishLoad')
          that.pagetwo++
        })
    },
    jumpPage (receiptcode, id) {
      this.$router.push({
        path: '/arctive',
        query: {
          receiptcode: receiptcode,
          receiptid: id
        }
      })
    }
  }
}
</script>

<style scoped>
  #list {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #f5f5f5;
  }
  #list>>>.yd-tab-nav-item{
    height: 46px;
    line-height: 46px!important;
  }
  #list>>>.yd-tab-nav-item>a {
    height: 46px;
    line-height: 46px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
  }
  #list>>>.yd-tab-nav {
    color: #92d4ef!important;
    font-size: 14px!important;
  }
  #list>>>.yd-tab-panel {
    position: fixed;
    overflow-y: auto;
    background: none;
    bottom: 0;
    top: 46px;
    width: 100%;
    box-sizing: border-box;
    overflow-x:hidden;
  }
  .nopaylist-content {
    overflow: hidden;
    width: 100%;
    padding: 8px;
  }
  .nopaylist-wrapper {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .nopaylist-box {
    overflow: hidden;
    height: 100%;
  }
  .nopaylist-nav {
    display: block;
    width: 100%;
    height: 100px;
    margin-bottom: 8px;
    background: #fff;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .nopaylist-top {
    display: flex;
    height: 49px;
    border-bottom: 1px solid #f5f5f5;
    line-height: 49px;
  }
  .nopaylist-top-left {
    flex: 3;
    font-size: 15px;
    color: #92d4ef;
    font-weight: bold;
    text-align: left;
  }
  .nopaylist-top-right {
    flex: 7;
    font-size: 15px;
    color: #999;
    text-align: right;
  }
  .nopaylist-bottom {
    display: flex;
    height: 50px;
    line-height: 50px;
  }
  .nopaylist-bottom-left {
    flex: 7;
    font-size: 15px;
    color: #333;
    text-align: left;
  }
  .nopaylist-bottom-right {
    flex: 3;
    font-size: 15px;
    color: #333;
    text-align: right;
  }
  #list>>>.yd-tab-nav .yd-tab-active:before {
    content: "";
    width: 70%;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -35%;
    z-index: 4;
    background-color: #92d4ef;
}
#list>>>.yd-tab-nav .yd-tab-active{
  color:#92d4ef!important;
}
.no-list{
  margin-top: 25%;
}
.no-list img{
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: block;
}
.text{
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>
